<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table,
        td {
            width: 450px;
            border-collapse: collapse;
            border-spacing: 0;
            text-align: center;
            margin: 0 auto;
            border: 1px solid gray;
        }
    </style>
</head>

<body>

    <script>
        // 1.在页面上根据数据，动态创建表格
        // var arr = [{ name: 'Jack', age: 18, gender: '男' }, { name: 'Rose', age: 20, gender: '女' }, { name: 'Top', age: 22, gender: '男' }]
        // 创建一个表格，展示上面数组中的信息
        var arr = [
            {
                name: 'Jack',
                age: 18,
                gender: '男'
            },
            {
                name: 'Rose',
                age: 20,
                gender: '女'
            },
            {
                name: 'Top',
                age: 22,
                gender: '男'
            }
        ];
        function fn() {
            document.write("<table>");
            for (var i = 0; i < arr.length; i++) {
                document.write("<tr>");
                for (var key in arr[i]) {
                    document.write("<td>");
                    document.write(arr[i][key]);
                    document.write("</td>");
                }
                document.write("</tr>");
            }
            document.write("</table>");
        }
        fn();
        // var tbody = document.createElement("tbody");
        // var table = document.querySelector("#data>table");
        // table.appendChild("tbody");
        // for (var emp of json) {
        //     var tr = document.createElement("tr");
        //     tbody.appendChild(tr);

        //     for (var key in emp) {
        //         var td = document.createElement("td");
        //         td.innerHTML = emp[key];
        //         tr.appendChild(td);
        //     }
        // }


        // <ul>

        // </ul>

        // var arr = [
        // { name: "张三", age: 21, sex: "男" },
        // { name: "李四", age: 20, sex: "男" },
        // { name: "王五", age: 26, sex: "男" },
        // { name: "王小二", age: 22, sex: "女" }]
        // // 根据数据 生成 dom元素
        // var str = "";
        // arr.forEach(function (item) {
        //     str += `<li>姓名是${item.name} 年龄是${item.age} 性别是${item.sex}</li >`;
        // })
        // document.write(str);

        // // 获取ul 把 li填充到ul里
        // var ulEle = document.querySelector("ul");
        // document.onclick = function () {
        //     ulEle.innerHTML = str;
        // }
        // console.log(str);

    </script>
</body>

</html>